<!-- 主体表格 -->
<div style="padding: 16px;">
	<table class="layui-hide" id="Table_Auth_URIs" lay-filter="Table_Auth_URIs"></table>
</div>

<!-- 表格工具栏 -->
<script type="text/html" id="Toolbar_Auth_URIs">
	<div class="layui-inline">
		<input type="text" id="searchUris" placeholder="搜索URI或描述..." class="layui-input" style="width: 240px; height: 32px; margin-right: 10px;">
	</div>
	<div class="layui-inline">
		<button class="layui-btn layui-btn-sm" lay-event="Auth_URIs_Search"><i class="layui-icon layui-icon-search"></i> 搜索</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="Auth_URIs_Refresh"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
	</div>
</script>

<!-- 操作列 -->
<script type="text/html" id="Tool_Auth_URIs">
	<div class="layui-clear-space">
		<a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="edit">编辑</a>
	</div>
</script>

<!-- 页面逻辑处理 -->
<script>
	layui.use(['table'], function(){
		var table = layui.table;
		var layer = layui.layer;
		var $ = layui.$;
		
		// 创建渲染实例
		table.render({
			elem: '#Table_Auth_URIs',
			toolbar: '#Toolbar_Auth_URIs',
			url: '/auth/uris',
			defaultToolbar: ['filter', 'exports', 'print'],
			height: 'full-135',			// 最大高度减去其他容器已占有的高度差
			css: "",					// 重设当前表格样式
			cellMinWidth: 60,			// 最小列宽度
			skin: "line",				// 表格样式
			totalRow: false,			// 开启合计行
			page: {
				limit: 20,				// 每页显示数量
				groups: 11,				// 显示分页数量
				layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
			},
			cols: [[
				{field:'sort', width:80, title: '排序'},
				{width:160, title: '权限组', templet: '<span class="layui-badge auth-color-{{= d.authID }}">{{= d.authName }}</span>    <code></code>'},
				{width:320, title: 'URI', templet: '<code>{{= d.uri }}</code>'},
				{field:'desc', title: '描述'},
				{field:'createTime', width:180, title: '创建时间'},
				{width:100, title: '操作', templet: '#Tool_Auth_URIs'},
			]],
			done: function(){
			},
			error: function(res, msg){
				console.log(res, msg)
			}
		});
		
		// 工具栏事件
		table.on('toolbar(Table_Auth_URIs)', function(obj){
			switch ( obj.event ) {
				case 'Auth_URIs_Search':
					// 搜索
					table.reloadData('Table_Auth_URIs', {
						where: {
							search: "%" + document.getElementById('searchUris').value + "%",
						},
					});
				break;
				case 'Auth_URIs_Refresh':
					// 刷新
					table.reloadData('Table_Auth_URIs');
				break;
			};
		});
		
		// 触发单元格工具事件
		table.on('tool(Table_Auth_URIs)', function(obj){
			var data = obj.data; // 获得当前行数据
			if(obj.event == 'edit'){
				// 编辑
				var layerIndex = layer.open({
					title: '编辑 URI 权限',
					type: 2,
					shadeClose: true,
					area: ['500px', '356px'],
					content: '/view/auth/uris/edit',
				});
			}
		});
	
	});
</script>
